<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>编辑地址</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/iconfont.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
	<link href="../css/mui.picker.css" rel="stylesheet" />
	<link href="../css/mui.poppicker.css" rel="stylesheet" />

		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mUnG2gyZMpF536eT3rP2jcMwaRTcPQDB"></script>
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<style>
		html,
		body {
			background-color: #f6f6f6;
			min-height: 100vh;
			font-size: 0.373rem;
		}

		ul,
		ol {
			list-style: none;
		}

		body input[type='text'],
		ul,
		li {
			padding: 0;
			margin: 0;
		}

		.clear {
			clear: both;
			height: 0;
			font-size: 0;
			line-height: 0;
			visibility: hidden;
			overflow: hidden;
		}

		/*编辑地址*/

		.editor_li {
			padding: 0 0.4rem;
			border-bottom: 1px solid #f6f6f6;
			line-height: 1.2rem;
			background: #FFFFFF;
			display: flex;
			align-items: center;
		}

		.editor_li input {
			font-size: 0.373rem;
			border: 0;
		}

		.editor_li label {
			width: 2rem;
		}

		.editor_li input[type='text'] {
			width: 6.13rem;
		}

		.editor_li_b {
			margin-bottom: 0.266rem;
		}

		.editor_li_bett {
			justify-content: space-between;
			display: flex;
		}

		.my_butn button {
			background: url(../images/my_buttom.png) no-repeat;
			color: #FFFFFF;
			line-height: 1.266rem;
			height: 1.266rem;
			width: 100%;
			padding: 0;
			box-sizing: border-box;
			background-size: 100% 100%;
			border: 0;
		}

		.my_butn {
			margin: 1.093rem 0.373rem;
		}

		.editor_li_dw img {
			height: 0.8rem;
			width: 0.65rem;
		}

		.editor_li_dw {
			display: flex;
			align-items: center;
			border-left: 1px solid #000;
			padding-left: 0.36rem;
			box-sizing: border-box;
		}

		.editor_li_bett label {
			width: 2.7rem;
		}

		.mui-btnno {
			border: 0;
			padding: 0;
			width: 0;
		}

		.mui-btnsan {
			padding: 0;
			border: 0;
			text-align: left;
			font-size: 0.373rem;
			width: 6.13rem;
			margin: 0;
			color: #888888;
		}
	</style>
</head>

<body>
	<!--顶部-->
	<header class="mui-bar mui-bar-nav" style="display: block;">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">编辑地址</h1>
	</header>
	<div class="my_content mui-content" id="app" style="padding-top: 44px;">
		<div class="editor">
			<ul class="editor_ul">
				<li class="editor_li">
					<label>收货人：</label>
					<input type="text" v-model="address.name" placeholder="" value="" />
				</li>
				<li class="editor_li">
					<label>手机号：</label>
					<input type="text" v-model="address.phone" placeholder="" value="" />
				</li>
				<li class="editor_li">
					<label>市区社区：</label>
					<!--<input type="text" placeholder="西安市未央区锦园新世纪社区" value=""/>-->
					<button id='showCityPicker3' class="mui-btn mui-btn-block mui-btnsan" type='button'>{{address.province}} {{address.city}} {{address.area}}</button>
					<div id='cityResult3' class="ui-alert"></div>
					<div class="editor_li_dw" onclick="get_position()">
						<img src="../images/my_dw.png" />
					</div>
				</li>
				<li class="editor_li editor_li_b">
					<label>详细地址：</label>
					<input type="text" v-model="address.address" placeholder="" value="" />
				</li>
				<!--<li class="editor_li editor_li_bett mui-table-view-cell">-->
				<!--<label>默认地址：</label>-->
				<!--<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">-->
				<!--<div class="mui-switch-handle" ></div>-->
				<!--</div>-->
				<!--</li>-->
			</ul>

			<div class="my_butn">
				<button @click="sub_address">确认</button>
			</div>
		</div>
	</div>
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.picker.js"></script>
	<script src="../js/js.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var href = location.href;
		var uaid = href.split("=")[1];
	 
		// 读取用户信息
		var user = localStorage.getItem("user");
		user = JSON.parse(user);
		// 读取用户社区信息
		var sq_info = localStorage.getItem("address");
		sq_info = JSON.parse(sq_info);
		
		var vue = new Vue({
			el: '#app',
			data: {
				address: {
					
				},
				//city:''
			},
			methods: {
				sub_address: function () {
 
					uaid = this.address.uaid
					name = this.address.name
					phone = this.address.phone
					province = this.address.province
					city = this.address.city
					area = this.address.area
					address = this.address.address;
					mui.post(host_config.app_server+"address/siteupdate",
						{
							uaid: uaid,
							name: name,
							phone: phone,
							province: province,
							city: city,
							area: area,
							address: address,
							account_type:user.account_type
						}, function (data) {
							console.log(data)
							if (data == 1) {
								mui.openWindow({
									url: 'address_list.html',
									id: 'address_list',
								})
							} else {
								mui.toast("修改失败,稍后重试")
							}
						})
				}
			}, mounted: function () {
				console.log('编辑地址')
				var that = this;

				var address_info = localStorage.getItem("edit_address_info")
				address_info = JSON.parse(address_info)
  
				this.address = address_info;

				// init_address_data(uaid,function(info){
				//     console.log(info)
				//     vue.address = info
				// })

			}
		})

		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
	 

			function get_position() {
				if(window.plus) {
					plus.nativeUI.showWaiting("定位中...")
				}

				//使用百度地图定位
				 
				
				
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if(this.getStatus() == BMAP_STATUS_SUCCESS) {
						var mk = new BMap.Marker(r.point);
						 
						//alert('您的位置：' + r.point.lng + ',' + r.point.lat);
						point_to_address(r.point.lng,r.point.lat)
						//vue.city = r.point.lng + ',' + r.point.lat
					} else {
						plus.nativeUI.closeWaiting()
						mui.toast("定位失败")
					}
				}, {
					enableHighAccuracy: true
				})
				
				function point_to_address(lng,lat){
					//  经纬度转位置信息
 
					var point = new BMap.Point(lng, lat);
					var geoc = new BMap.Geocoder();
					var pt = point;
					geoc.getLocation(pt, function(rs) {
						console.log(rs)
						var addComp = rs.addressComponents;
						console.log(addComp)
						vue.address.province = addComp.province
						vue.address.city = addComp.city
						vue.address.area = addComp.district
						
						
						 
//						alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
						if(window.plus) {
							plus.nativeUI.closeWaiting()
						}
	
					});
					
					//定位超过5秒关闭等待动画
					setTimeout(function() {
						if(window.plus) {
							plus.nativeUI.closeWaiting()
						}
					}, 5000)
				}
				   
				
				/*
				//使用手机原生定位
				plus.geolocation.getCurrentPosition(function(p) {
					//定位成功
					console.log(JSON.stringify(p))
					//						mui.toast(p.address.province+" "+p.address.city+" "+p.address.district)
					document.getElementById('showCityPicker3').innerText = p.address.province + " " + p.address.city + " " + p.address.district

					plus.nativeUI.closeWaiting()
				}, function(err) {
					//定位失败
					plus.nativeUI.closeWaiting()

				}, {});
				//定位超过5秒关闭等待动画
				setTimeout(function() {
					plus.nativeUI.closeWaiting()
				}, 5000)
					
				*/
			}
		function init_address_data(uaid, cb) {
			
			mui.get(url + "api/address/show", {
				uaid: uaid
			}, function (data) {
				 
				if (data.code == 1) {
					cb(data.data[0])
				} else {
					console.log('server error')
				}
			}, 'json')
		}

		mui('.mui-content .mui-switch').each(function () { //循环所有toggle
			//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
			console.log(this.classList.contains('mui-active'))
			this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
			/**
			 * toggle 事件监听
			 */
			this.addEventListener('toggle', function (event) {
				//event.detail.isActive 可直接获取当前状态
				this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');
			});
		});
	</script>
	<!--省市联动-->
	<script>
		(function ($, doc) {
			$.init();
			$.ready(function () {
				/**
				 * 获取对象属性的值
				 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
				 * @param {Object} obj 对象
				 * @param {String} param 属性名
				 */
				var _getParam = function (obj, param) {
					return obj[param] || '';
				};
				//-----------------------------------------
				//					//级联示例
				var cityPicker3 = new $.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var showCityPickerButton = doc.getElementById('showCityPicker3');
				var cityResult3 = doc.getElementById('cityResult3');
				showCityPickerButton.addEventListener('tap', function (event) {
					cityPicker3.show(function (items) {

						vue.address.province = _getParam(items[0], 'text')

						vue.address.city = _getParam(items[1], 'text')
						vue.address.area = _getParam(items[2], 'text')
						//							showCityPickerButton.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
			});
		})(mui, document);
	</script>
</body>

</html>